<template>
	<view class="m-steps" v-if="taskInfo.steps">
		<view class="u-title flex-between">
			<view class="text-left">操作步骤</view>
			<view class="text-right" style="font-size: 28rpx;">请按照流程操作</view>
		</view>
		<view class="u-content">
			<form @submit="submitFrom">
				<view class="flex-start setp-item" v-for="(item, index) in taskInfo.steps" :key="index">
					<view class="item-number">
						<text>{{index+1}}</text>
					</view>
					<view class="item-conter">
						<view class="conter-title" v-if="item.fields['text']">{{item.fields['text']}}</view>
						<view class="conter-text" v-if="item.type == 2 || item.type == 3">
							<text v-if="item.type == 2">{{item.fields['copy']}}</text>
							<text v-if="item.type == 3">{{item.fields['link']}}</text>
							<view class="func-btns">
								<m-icon name="file-copy-2-line" color="#555" size="26rpx" text="复制" textColor="#555" textSize="26rpx" @click="copy(item.fields['copy'])" v-if="item.type == 2"></m-icon>
								<m-icon name="links-line" color="#555" size="26rpx" text="打开" textColor="#555" textSize="26rpx" @click="$util.openUrl(item.fields['link'])" v-if="item.type == 3"></m-icon>
							</view>
						</view>
						<view class="conter-image flex-between" v-if="item.type == 4 || item.type == 5 || item.type == 7">
							<view class="image-conter">
								<text class="label">{{labelText[item.type]}}</text>
								<image :src="item.fields['img']" mode="widthFix" style="width: 100%;"></image>
							</view>
							<view class="oper-conter">
								<text class="btn btn-main btn-radius btn-sm" v-if="item.type == 5" @click="downImg(item.fields['img'])">保存二维码</text>
								<view class="uploads" v-if="item.type == 7">
									<view>
										<input type="hidden" :name="'rec'+item.sort+'image'" :value="recValue[item.sort]" style="display: none;">
										<view class="preview-img" v-if="stepImg[item.sort] || recInfoDisplay">
											<u--image :src="stepImg[item.sort]" mode="widthFix" width="100%" v-if="stepImg[item.sort]" @click="uploadImg(item.sort)"></u--image>
											<u--image :src="recSubInfo[item.sort]['value']" mode="widthFix" width="100%" v-if="recInfoDisplay"></u--image>
										</view>
										<view class="upload-img" @click="uploadImg(item.sort)" v-if="taskInfo.rec_info && taskInfo.rec_info.state == 1 && !stepImg[item.sort] || taskInfo.rec_info && taskInfo.rec_info.state == 3 && !stepImg[item.sort]">
											<i-icon name="camera-line" size="60rpx" color="#444" @click="uploadImg(item.sort)"></i-icon>
											<view class="text">
												<text>选择图片</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="conter-input" v-if="item.type == 6">
							<input type="text" :name="'rec'+item.sort+'text'" placeholder="请输入提交信息" class="input" v-if="!recInfoDisplay"/>
							<input type="text" :name="'rec'+item.sort+'text'" :value="recSubInfo[item.sort]['value']" class="input" disabled="" v-if="recInfoDisplay"/>	
						</view>
					</view>
				</view>
				<view class="s-operation">
					<view class="e-countdown" v-if="taskInfo.rec_info && taskInfo.rec_info.state > 0 && taskInfo.rec_info.state == 1 || taskInfo.rec_info.state == 3 && taskInfo.rec_info.is_repeat == 1 && taskInfo.limit_sub_time > 0">
						<text class="text-in-c-2">请在</text>
						<u-count-down :time="subTime" format="HH:mm:ss" @finish="finish"></u-count-down>
						<text class="text-in-c-2">内完成提交</text>
					</view>
					<view class="flex-between" style="align-items: center;flex-wrap: nowrap;">
						<m-favs :taskId="taskInfo.id" :favChecked="favChecked"></m-favs>
						<button form-type="submit" class="btn on" :disabled="buttonInfo.disabled" >{{ buttonInfo.text }}</button>
					</view>
				</view>
			</form>
		</view>
		<m-viveimg 
			:show="showImg" 
			:imgSrc="showImgUrl"
			@preViewClose="viewClose"
		>
		</m-viveimg>
		<m-popup 
			:show="repeatSubShow"
			title="再次提交" 
			type="1"
			contentText="请认真检查本次提交的内容是否符合要求，如再次被驳回您的抢单将会被被取消且无法再次申领"
			btnText="提交"
			@subButton="repeatSub"
			@closePopup="modalClose"
		>
		</m-popup>
	</view>
</template>

<script>
	export default {
		name:"m-steps",
		props: ['taskInfo','list','favChecked'],
		data() {
			return {
				stepImg:[],
				recValue:[],
				labelText:{
					4:'说明图',
					5:'二维码',
					7:'示例图',
				},
				showImg:false,
				showImgUrl:'',
				repeatSubShow:false,
				repeatData:[],
				subTime:'', //提交倒计时
				timeData: {},
			};
		},
        computed: {
			recSubInfo:function(){
				return this.taskInfo.rec_info.sub_info;
			},
			recInfoDisplay:function(){
				return this.taskInfo.rec_info.state == 2 || this.taskInfo.rec_info.state == 4 ? true : false;
			},
			buttonInfo:function(){
				var buttonInfo = [];
				if(!this.taskInfo.rec_info){
					// 不存在报名记录
					if(this.taskInfo.state != 3){
						buttonInfo['disabled'] = true;
						buttonInfo['text'] = this.taskInfo.state_text;
					}else{
						buttonInfo['disabled'] = false;
						buttonInfo['text'] = '报名';
					}
				}else{
					// 存在报名记录
					if(this.taskInfo.rec_info.state == 1 || this.taskInfo.rec_info.state == 3 && this.taskInfo.rec_info.is_repeat == 1){
						buttonInfo['disabled'] = false;
						buttonInfo['text'] = '提交';
					}
							
					if(this.taskInfo.rec_info.state == 2){
						buttonInfo['disabled'] = true;
						buttonInfo['text'] = '待审核';
					}
							
					if(this.taskInfo.rec_info.state == 3 && this.taskInfo.rec_info.is_repeat == 2){
						buttonInfo['disabled'] = true;
						buttonInfo['text'] = '复审未通过';
					}
							
					if(this.taskInfo.rec_info.state == 4 && this.taskInfo.limit_rec == 1){
						buttonInfo['disabled'] = true;
						buttonInfo['text'] = '奖励已发放';
					}
				}
				return buttonInfo;
			}
        },
		mounted(){
			this.ationSubTime();
		},
		methods: {
            onChange(e) {
                this.timeData = e
            },
			
			/** 按钮点击反馈 **/
			onButton(){
				if(!this.taskInfo.rec_info){
					// 领取
					this.$emit('recTask');
					this.ationSubTime(true);
				}else{
					// if(this.recInfo.state == 1 || this.recInfo.state == 3 && this.recInfo.is_repeat == 1){
					// 	// 提交审核
					// 	this.submitFrom();
					// }
				}
			},
			
			/** 提交审核 **/ 
			submitFrom:  function(e){
				var _this = this;
				if(!this.taskInfo.rec_info){
					// 领取任务
					this.$emit('recTask');
					this.ationSubTime(true);
					return false;
				}
				
				if(_this.taskInfo.rec_info.state != 1 && _this.taskInfo.rec_info.state != 3 && _this.recInfo.is_repeat != 1){
					return false;
				}
				if(_this.taskInfo.rec_info.state == 3 && _this.taskInfo.rec_info.is_repeat == 1){
					_this.repeatSubShow = true;
					_this.repeatData = e.mp.detail.value;
				}else{
					_this.$emit('subTask',{
						data: e.mp.detail.value
					});
				}
			},
			
			/** 复审提交 **/
			repeatSub(){
				this.$emit('subTask',{
					data:this.repeatData
				});
				this.modalClose();
			},
			
			/** 倒计时结束后刷新任务 **/
			finish(time){
				// console.log(time);
				this.$emit('overtime');
			},
			
	
			/** 计算提交倒计时 **/
			ationSubTime(rec = false){
				if(rec){
					this.subTime = this.taskInfo.limit_sub_time * 60 * 1000;
				}else{
					var endSubTime = this.taskInfo.rec_info.limitsub_time
					var timestamp = Math.round(new Date() / 1000);
					this.subTime = (endSubTime - timestamp) * 1000;
				}
			},
			
			copy(nr){
				if(!this.taskInfo.rec_info){
					uni.showToast({title:'请先报名',icon:"none"});
					return false;
				}
				uni.setClipboardData({
					data: nr
				});
			},
			
			viewImg(url){
				this.showImg = true;
				this.showImgUrl = url;
			},
			
			viewClose(){
				this.showImg = false;
			},
			
			downImg(url){
				if(!this.taskInfo.rec_info){
					uni.showToast({title:'请先报名',icon:"none"});
					return false;
				}
				this.$util.saveImageToPhoto(url);
			},
			
			async uploadImg(sort){
				// this.stepImg = [1,2];
				var self = this;
				if(!this.taskInfo.rec_info){
					uni.showToast({title:'请先报名',icon:"none"});
					return false;
				}
				if(self.recState == 3 && self.recSubInfo.is_repeat == 2){
					uni.showToast({title:'无权限',icon:"none"});
					return false;
				}
				uni.chooseImage({
				    count: 1, // 上传数量
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success: async function (res) {
						self.$set( self.stepImg, sort, res.tempFilePaths[0]);
				    	uni.showLoading({
				    		title:"图片上传中"
				    	})
						var up = (await Task.uploadFile(res.tempFilePaths[0])).data;
				    	uni.hideLoading();
						// console.log(up);
				    	up=JSON.parse(up);
				    	if(up.code==200){
							self.$set( self.recValue, sort, up.data.url);
				    		uni.showToast({
				    			title:"上传成功"
				    		})
				    	}else{
				    		uni.showToast({
				    			title:up.msg,
				    			icon:'none'
				    		})
				    	}
				    }
				});
			},
			
			modalClose(){
				this.repeatSubShow = false;
			},
		}
	}
</script>

<style lang="scss">
	.u-title{
		padding: 10px 30rpx;
		font-size: 30rpx;
		border-bottom: 1px solid #f3f3f3;
		align-items: center;
		.text-left{
			
		}
		.text-right{
			font-size: 24rpx;
			color: $incolor-2;
		}
	}
	.u-content{
		position: relative;
		padding: 15px 30rpx 0;
	}
	.setp-item{
		position: relative;
		flex-wrap: nowrap;
		align-items: flex-start;
		padding-bottom: 15px;
		.item-number{
			text{
				position: relative;
				width: 50rpx;
				height: 50rpx;
				border-radius: 100%;
				background-color: $maincolor-1;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: $contentSize;
				z-index: 2;
			}
			margin-right: 5px;
		}
		.item-conter{
			width: 100%;
		}
		.conter-title{
			font-size: $titleSize;
			color: $incolor-1;
			margin-bottom: 5px;
		}
		.conter-text{
			background-color: $incolor-4;
			text{
				color: $incolor-2;
				font-size: $contentSize;
				display: block;
				padding: 10px 30rpx 5px;
			}
			.func-btns{
				display: block;
				text-align: right;
				padding: 5px 30rpx;
			}
		}
		.conter-image{
			flex-wrap: nowrap;
			.image-conter{
				width: 50%;
				overflow: hidden;
				max-height: 150px;
				position: relative;
			}
			.label{
				padding: 1px 5px;
				font-size: $contentSize;
				position: absolute;
				right: 0;
				top: 0;
				color: $incolor-1;
				border-bottom-left-radius: 10px;
				background-color: $maincolor-1;
				z-index: 2;
			}
			/deep/ .image{
				width: 100%!important;
				overflow-y: auto!important;
				height: 100%!important;
			}
			.oper-conter{
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				.uploads{
					text-align: center;
					border-radius: 10px;
					overflow: hidden;
					
				}
				.preview-img{
					position: relative;
					width: 100px;
					height: 100px;
				}
				.preview-img::after{
					position: absolute;
					content:'验证图片';
					right: 0;
					top: 0;
					background-color: #ff5e00;
					color: #fff;
					font-size: $contentSize;
					padding: 1px 5px;
					border-bottom-left-radius:5px;
				}
				.upload-img{
					// padding: 10px;
					// background-color: #000;
					border-radius: 10px;
					position: relative;
					text-align: center;
					padding: 10px 15px;
					background-color:rgba(255, 212, 38, .3);
					.text{
						font-size: $titleSize;
					}
					// .i-icon{
					// 	display: flex;
					// }
				}
			}	
		}
		.conter-input{
			background-color: #f4f8fc;
			padding: 5px;
			.input{
				margin: 5px;
				font-size: $contentSize;
			}
		}
	}

	.setp-item::after{
		position: absolute;
		content: '';
		left: 25rpx;
		width: 1px;
		height: 100%;
		background-color: $maincolor-1;
		top: 0;
		z-index: 1;
	}
	
	.setp-item:last-child::after{
		display: none;
	}
	
	.s-operation{
		background:rgba(255,255,255,.8);
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 10;
		padding: 10px 30rpx;
		.m-favs{
			width: 50px;
		}
		.btn{
			width: 100%;
		}
		.btn.on{
			color: $incolor-1;
			background: linear-gradient(90deg, #F2BC35 , #FF9A18);
		}
	}

	.u-content .e-countdown{
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
	/deep/ .u-count-down{
		margin: 0 5px;
		color: #000;
		&__text{
			color: $auxcolor-3;
			font-size: 35rpx;
			letter-spacing:1rpx
		}
	}

</style>
